<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拍照</title>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<style type="text/css">
#cam{float:left; width:320px; height:300px; margin:10px;}
.btn{height:28px; line-height:28px; border:1px solid #d3d3d3; margin-top:10px; background:url(btn_bg.gif) repeat-x; cursor:pointer}
#results{margin-top:0px;}
</style>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jpegcam/webcam.js"></script> 
<script type="text/javascript">
$(function(){
	$(".tab td,th").addClass("tab_bor");
	$(".tab th").addClass("tab_top");
	$("#tab td").mouseover(function(){
		$(this).parent().addClass("tab_mouseov");
	}).mouseout(function(){
		$(this).parent().removeClass("tab_mouseov");
	});
	$(".tab td").attr("align","center");
});
</script>
</head>

<body>
<div style="height:30px; font-size:15px; margin:10px 0px 0px 10px;">
   <img src="images/addExam.png" height="30px"/><span style="font-size:18px; margin-left:4px; color:#06C;"><strong>拍照</strong></span>
</div>
<hr  width="98%" style="margin-left:10px; color:#06F;" align="left" color="#0066FF"/>
<div style="font-size:13px; margin-left:10px;">
  姓名：<input type="text"  name=""  size="10"/>
  身份证号码：<input type="text"  name=""  size="18" maxlength="18"/>
  <input type="button" value="   搜索" class="serach_btn_style"/>
</div>
<table border="0" cellspacing="0" cellpadding="0" class="tab" id="tab">
   <tr>
    <th  width="6%">序号</th>
    <th width="8%">姓名</th>
    <th width="12%">身份证号码</th>
    <th width="8%">性别</th>
    <th width="12%">所在公司</th>
    <th width="12%">证件到期日期</th>
    <th width="11%">用户当前状态</th>
    <th width="10%">是否已拍照</th>
    <th width="10%" >拍  照</th>
  </tr>
  <tr>
    <td>1</td>
    <td>陈俊松</td>
    <td>350681199006256536</td>
    <td>男</td>
    <td>福建工程学院</td>
    <td>2012-12-10</td>
    <td>正常</td>
    <td>未拍照</td>
    <td><input type="button" value="拍  照"  title="点击进行体检" class="btn_style"/></td>

  </tr>
  <tr>
    <td>1</td>
    <td>陈俊松</td>
    <td>350681199006256536</td>
    <td>男</td>
    <td>福建工程学院</td>
    <td>2012-12-10</td>
    <td>正常</td>
    <td>未拍照</td>
    <td><input type="button" value="拍  照"  class="btn_style"/></td>
  </tr>
  <tr>
    <td>1</td>
    <td>陈俊松</td>
    <td>350681199006256536</td>
    <td>男</td>
    <td>福建工程学院</td>
    <td>2012-12-10</td>
    <td>正常</td>
    <td>已拍照</td>
    <td><input type="button" value="拍  照"  class="btn_style"/></td>
  </tr>
</table>
<br /><br />
 <table border="0" cellspacing="0" cellpadding="0" class="tab">
  <tr>
    <td class="tab_top" align="center">拍照</td>
  </tr>
  <tr>
    <td align="left" valign="top" >
        <div id="cam" style="border:1px solid #999"> 
          <script language="JavaScript">
		    webcam.set_api_url( 'action.php' );
		    webcam.set_quality( 90 ); // JPEG quality (1 - 100)
		    webcam.set_shutter_sound( true ); // play shutter click sound
		    document.write( webcam.get_html(320, 240, 160,120) );
	      </script>
          <input type=button value="点击这里拍照" class="btn" onclick="take_snapshot()"> 
          
          <script language="JavaScript">
			webcam.set_hook( 'onComplete', 'my_completion_handler' );
			
			function take_snapshot() {
				// take snapshot and upload to server
				document.getElementById('results').innerHTML = '<h4>Uploading...</h4>';
				webcam.snap();
			}
			function my_completion_handler(msg) {
				// extract URL out of PHP output
				if (msg.match(/(http\:\/\/\S+)/)) {
					var image_url = RegExp.$1;
					// show JPEG image in page
					document.getElementById('results').innerHTML = 
						'<h4>Upload Successful!</h4>' + 
						'<img src="' + image_url + '">';
					// reset camera for another shot
					webcam.reset();
				}
				else alert("PHP Error: " + msg);
			}
		</script>
        </div> 
        <div id="results"> 
         <!--显示上传结果--> 
        </div>
        <div style="height:0px; clear:both;  line-height:0px;"></div>
    </td>
  </tr>
  <tr><td height="36px"><input type="button" value="保  存"  class="btn_style"/><input type="button" value="关  闭"  class="btn_style"/></td></tr>
 </table>


</body>
</html>
